<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>this is test</title>

    <script src="js/vue.js"></script>
    <style>
        
        ul{
            list-style: none;
        }
        ul li{
            display: flex;
        }
        /* .price{
            margin-right:20px;
        } */
        .cont{
            margin-left:20px;
            margin-right:20px;
        }
        .cont input{
            text-align: center;
            width:50px;

        }
        .totalPrice{
            text-align: center;
            width:100px;
            
        }
    </style>
</head>
<body>
    <div id="app" class="isActive">
        <h2>hahahhaah</h2>
        <h4>this is demo</h4>
        <my-component :initialcontent="dataSet"></my-component>
    </div>
    <script>
        Vue.component("my-component",{
            props:["initialcontent"],
            data: function () {
                    return {
                        content: this.initialcontent,
                        totalPrice:0,
                    }
                },
            template:`
                <div>
                    <h2>Cart</h2>
                    <h2>Gouwuchexxxx</h2>
                    <h2>this is xian de </h2>
                    <ul>
                        <li v-for="(item,index) in content" v-if="!item.checked">
                            <input type="checkbox" v-model="item.checked" @change="calcTotalMount()">
                            <div class="title">{{item.title}}</div>
                            <div class="cont">
                                <button @click="add(index)">+</button>
                                <input type="text" v-model="item.num" @keydown.enter="getNum($event,index)">
                                <button @click="reduce(index)">-</button>
                            </div>
                            <div class="price">{{item.price}}</div>
                            <div class="totalPrice">{{item.price * item.num}}</div>
                            <button @click="del(index)">删除</button>
                        </li>
                    </ul>
                    <h2>结算</h2>
                    <ul>
                        <li v-for="(item,index) in content" v-if="item.checked">
                            <input type="checkbox" v-model="item.checked" @change="calcTotalMount()">
                            <div class="title">{{item.title}}</div>
                            <div class="cont">
                                <button @click="add(index);calcTotalMount()">+</button>
                                <input type="text" v-model="item.num" @keydown.enter="getNum($event,index);calcTotalMount()">
                                <button @click="reduce(index);calcTotalMount()">-</button>
                            </div>
                            <div class="price">{{item.price}}</div>
                            <div class="totalPrice">{{item.price * item.num}}</div>
                            <button @click="del(index)">删除</button>
                        </li>
        </ul>
        <h2>总计:{{totalPrice}}元</h2>
                </div>
            `,
            methods:{
                add(index){
                    this.content[index].num ++ ;
                },
                reduce(index){
                    if(this.content[index].num >=1){
                        this.content[index].num -- ;
                        
                    }else{
                        this.content[index].num = 0 ;
                        
                    }
                    
                },
                del(index){
                    this.content.splice(index,1)
                },
                calcTotalMount(){
                    var item = this.dataSet.filter(function(ele){
                        return ele.checked
                    })
                    this.totalPrice = item.reduce(function(prev,cur,index,arr){
                        cur = arr[index].num * arr[index].price
                        return prev + cur
                    },0)
                    
                    
                    
                },
                getNum(e,index){
                    val = parseInt(e.srcElement.value)
                    if(!this.checkNumber(val)){
                        this.content[index].num = 0;
                        alert("请输入数字");
                        
                    }
                },
                checkNumber(obj){
                    var reg = /^[0-9]+.?[0-9]*$/;
                    if(reg.test(obj)){
                        return true
                    }
                        return false
                },
                calcTotalMount(){
                    item = this.content.filter(function(ele){
                        return ele.checked
                    })
                    this.totalPrice = item.reduce(function(prev,cur,index,arr){
                        cur = arr[index].num * arr[index].price
                        return prev + cur
                    },0)
                    
                    
                    
                }
            }
        })
        new Vue({
            el:"#app",
            data:{
                
                dataSet:[
                    {title:"烧饼",num:1,price:15,checked:false},
                    {title:"油条",num:1,price:50,checked:false},
                    {title:"卷馍",num:1,price:20,checked:false},
                    {title:"煎饺",num:1,price:10,checked:false}
                ],
                
            },
        })
    </script>
</body>
</html>